// 使用rsf创建一个函数形式的组件
import React from 'react'
import { ThemeConsumer } from './ThemeContext'
import { UserConsumer } from './UserContext'

function ConsumerPage () {
  return (
    <div>
      <h3>Hello ConsumerPage!!!</h3>
      {/* 这里就是Consumer的使用方式，与供应商的有点类似都是使用提供的组件包裹，达到目的 */}
      <ThemeConsumer>
        {
          /* 在消费者里面可以通过这样函数的方式来获取context中的值 */
          theme => (
            /*  还可以这样嵌套来获取多个context中的值，因为不同的provider有不同的consumer
            *   所以获取值的时候一定要注意，搞清楚逻辑
            *  */
            <UserConsumer>
              {
                user => <div
                  // 注意 因为传入的theme,user都是对象，所以获取的时候也是对象，使用的时候一定注意 不能jsx语法
                  // 不能直接输出对象，会报错
                  style = {{ color: theme.themeColor }}>{user.name}</div>
              }
            </UserConsumer>
          )
        }
      </ThemeConsumer>
    </div>
  )
}

export default ConsumerPage
